<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学习助手</title>
    <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="icon" href="./img/logo.png" type="image/png">
</head>

<style>
    body,
    html {
        margin: 0;
        padding: 0;
    }

    .title_label {
        top: 5px;
        height: 29px;
        width: 100%;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        text-align: center;
        font-family: PingFangSC-bold;
        font-weight: 700;
    }

    .header_main {
        width: 100%;
        margin: auto;
        background-image: url(./img/head_bg.png);
        background-position: top -110px right 0px;
        height: auto;
        padding: 20px;

        background-size: cover;
        background-size: 100%;
        background-repeat: no-repeat;
        color: dimgray;

    }

    .row {
        margin-top: 10px;
    }

    .m-l-30 {
        margin-left: 30px;
    }


    .buttoncontainer {
        text-align: center;
        height: 100vh;
        /* 使用视口高度单位，使容器占据整个视口高度 */
    }

    .submit {
        margin: auto;
        display: inline-block;
        color: white;
        background-color: #17ad74;
        width: 100%;
        height: 50px;
        border-radius: 10px;
        border: 0px;
    }
</style>

<body id="mainAPP" class="header_main">
    <header id="home">
        <div style="margin-bottom: 5px;"> <img src="../img/logo.png" alt="" width="90%" srcset="">
        </div>
    </header>
    <div class="row  ">
        <div class=" col-12" style="height: 600px;">
            <div class="taital_main">
                <input type="text" class="input_item" placeholder="请输入学号" id="nameInput">
                <input type="password" class="input_item" placeholder="请输入密码" id="pswdInput">
                <button type="button" class="input_submit" onclick="loginHandler()">登录 </button>
                <div id="infoDiv" class="margin-top-20">
                </div>
            </div>
        </div>
    </div>

    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/md5.js"></script>
    <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="icon" href="./img/icon.png" type="image/png">

    <div style="position:absolute; bottom: 0px;left: 0; width: 100%;   background-color: #17ad74; " id="bottomBox">
        <div style="text-align: center;">计网.云计算方向</div>
    </div>
</body>
<script>


    function loginHandler() {
        let sn = document.getElementById("nameInput").value;
        let pswd = document.getElementById("pswdInput").value; 

        var myHeaders = new Headers();
        myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");
        var requestOptions = {
            method: 'GET',
            headers: myHeaders,
            redirect: 'follow'
        };

        fetch("/v3/classmates/login?sn="+sn+"&pswd="+pswd, requestOptions)
            .then(response => response.json())
            .then(result => {
                localStorage.setItem("token", result.Title);
                localStorage.setItem("userInfo", JSON.stringify(result.Data));
                alert("欢迎你，" + result.Data.Name);
                window.location.href = "/home.html"

            })
            .catch(error => console.log('error', error));
    }




</script>

</html>